<template>
  <div class="easy-container flex align-items-center">
    <el-avatar :src="member.avatar" class="m-r-10" />
    <div>
      <div class="flex align-items-center" style="width: 12rem;">
        <router-link :to="`/users/${member.id}`" class="title link line1" :title="member.nickname">
          {{ member.nickname }}
        </router-link>
        <el-tag v-if="member.id === curUser.id" size="mini">你自己</el-tag>
      </div>
      <timeago2 :date-time="member.created_at" pre-text="加入于" />
    </div>
    <div class="flex flex-wrap">
      <div
        v-for="condition in conditions"
        :key="condition.label"
        class="m-l-30 flex flex-nowrap"
        style="width: 10rem;"
      >
        <span class="title info-deep line1" :title="condition.label">{{ condition.label }}</span>
        <span class="info-deep m-l-10 line1" :title="condition.value">{{ condition.value }}</span>
      </div>
    </div>
    <div class="m-l-auto flex align-items-center">
      <template v-if="editing && member.id !== curUser.id">
        <member-level-select :member="member" style="max-width: 6rem;" />
        <el-button type="danger" size="small" class="m-l-10" @click="kick">踢出</el-button>
      </template>
      <template v-else>
        <el-tag type="info" :disable-transitions="true">{{ levelCN }}</el-tag>
      </template>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import MemberLevelSelect from './member-level-select';

export default {
  name: 'member-item',
  components: { MemberLevelSelect },
  props: {
    member: {
      type: Object,
      required: true,
    },
    editing: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapState({ curUser: 'currentUser' }),
    levelCN() { return this.$C.groups.levelCN[this.member.level]; },
    conditions() {
      return Object.keys(this.member.joinConditions)
        .map(key => ({ label: key, value: this.member.joinConditions[key] }));
    },
  },
  methods: {
    // 踢出群组
    kick() {
      const msg = `<div>确认踢出成员 <strong class="el-alert--error is-light is-bold">${this.member.nickname}</strong> 吗？</div>`;
      this.$msgbox({
        title: '踢出成员',
        message: msg,
        dangerouslyUseHTMLString: true,
        showCancelButton: true, // 显示取消按钮
        customClass: 'confirm-left',
        confirmButtonText: '确定',
        confirmButtonLoading: false,
        confirmButtonClass: 'el-button--danger',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            Object.assign(instance, {
              confirmButtonLoading: true,
              confirmButtonText: '操作中...',
            });
            this.$api.groupMembers.delete({
              groupId: this.$route.params.groupId,
              memberId: this.member.id,
            }).then(() => {
              this.$message.success('已踢出成员');
              this.$emit('reload');
            }).catch(() => {})
              .then(() => done());
          } else done();
        },
      });
    },
  },
};
</script>

<style></style>
